<template>
  <div class="login">
    <!-- <div class="logo">
      <router-link :to="{name:'Home'}">
        <img src="../assets/logo-fullnew.png" alt />
      </router-link>
    </div>-->
    <div class="main_wrap">
      <div class="main">
        <h1 class="title">
          欢迎登陆
          <span class="mainColor">表单大师</span>
        </h1>
        <form method="post" @submit.prevent="onSubmit()">
          <div class="form_tel">
            <label>
              <svg-icon icon-class="tel" class-name="tel-style"></svg-icon>
              <input
                type="text"
                ref="tel"
                placeholder="手机号码"
                name="tel"
                v-model.trim="tel"
                maxlength="11"
              />
            </label>
          </div>
          <div class="form_pwd">
            <label>
              <svg-icon icon-class="pwd" class-name="pwd-style"></svg-icon>
              <input v-model.trim="pwd" :type="passType" ref="pwd" name="pwd" placeholder="密码" />
            </label>
            <span class="show_pwd" :class="{show: passType == 'text'}" @click="showPwd()"></span>
          </div>

          <div class="form_submit">
            <button
              class="submit"
              type="submit"
              :disabled="isDisabled"
              :class="{disabled: isDisabled}"
            >{{loginState}}</button>
          </div>

          <div class="toRe">
            <el-checkbox v-model="checked">记住我</el-checkbox>
            <p>
              <router-link
                :to="{name:'Forgetpwd',query:{query:$route.query.query || ''}}"
                class="mainColor"
                style="font-weight:700"
              >忘记密码</router-link>
              <span class="mainColor">|</span>
              <router-link
                :to="{name:'Register',query:{query:$route.query.query || ''}}"
                class="mainColor"
                style="font-weight:700"
              >新用户注册</router-link>
            </p>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import utils from "@/config/utils";
export default {
  name: "Login",
  data() {
    return {
      checked: false,
      isDisabled: false,
      loginState: "登陆",
      passType: "password",
      tel: utils.store.getCookie("userTel") ||  "",
      pwd:  utils.store.getCookie("userPwd") || "",
      token: "",
      msgTip: ""
    };
  },
  methods: {
    showPwd: function() {
      this.passType = this.passType === "text" ? "password" : "text";
    },
    beforeSubmit: function() {
      this.isDisabled = true;
      this.loginState = "正在登陆...";
    },
    onSuccess: function(res) {
      //console.log(res);
      // this.$utils.setUserId(res._id);
      // console.log(this.checked);
      if (this.checked) {
        utils.store.setCookie("userTel", this.tel, 1);
        utils.store.setCookie("userPwd", this.pwd, 1);
      } else {
        utils.store.removeCookie("userTel");
        utils.store.removeCookie("userPwd");
      }
      this.$store.commit("setUserInfo", res);
      var backUrl = this.$route.query.redirect || "";
      // console.log(backUrl);
      if (backUrl) {
        //如果 backUrl  存在  说明是通过其他页面跳过来的  需要跳回去
        window.location.href = backUrl;
      } else {
        this.$router.push("/");
      }
    },
    onError: function(err) {
      this.loginState = "登陆";
      this.isDisabled = false;
    },
    onSubmit: function() {
      this.beforeSubmit();
      let pwd = this.pwd;
      let tel = this.tel;
      this.$api
        .login({
          tel: tel,
          password: pwd
        })
        .then(
          res => {
            this.onSuccess(res);
          },
          err => {
            this.onError(err);
          }
        );
    }
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 575px;
  .logo {
    width: 100%;
    height: 50px;
    background: #fff;
    position: fixed;
    top: 0;
    a {
      display: block;
      width: 240px;
      height: 32px;
      margin-left: 200px;
      margin-top: 10px;
    }
  }
  .main_wrap {
    padding-top: 50px;
    height: 100%;
    background: url(../assets/loginback.png) no-repeat;
    background-size: 100% 100%;
    .main {
      width: 600px;
      margin: 0 auto;
      background: #fff;
      .title {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
      form {
        padding: 15px;

        div {
          width: 100%;
          margin-bottom: 15px;

          label {
            display: inline-block;
            width: 570px;
            height: 60px;
            line-height: 60px;

            .svg-icon {
              width: 2em;
              height: 2em;
              margin-right: 10px;
            }

            input::placeholder {
              color: #ccc;
            }

            input {
              width: 510px;
              height: 100%;
              padding: 0 10px;
              box-sizing: border-box;
              font-size: 1.5rem;
              background: #fff;
              border: 1px solid #ccc;
              border-radius: 10px;
              outline: 0;
            }
          }
        }

        .form_pwd {
          position: relative;

          input {
            padding-right: 80px;
          }

          .show_pwd {
            position: absolute;
            right: 20px;
            top: 0;
            width: 80px;
            height: 60px;
            background: url("../assets/pwd_hide.png") center center no-repeat;
            background-size: 36px;
          }

          .show_pwd.show {
            background: url("../assets/pwd_show.png") center center no-repeat;
            background-size: 36px;
          }
        }

        .form_submit {
          .submit {
            cursor: pointer;
            width: 100%;
            height: 4.4rem;
            margin-top: 1rem;
            border: 0.1rem solid #649efd;
            border-radius: 0.3rem;
            width: 100%;
            height: 100%;
            font-size: 1.7rem;
            line-height: 4.4rem;
            text-align: center;
            color: #fff;
            background: #649efd;
          }

          .disabled {
            cursor: not-allowed;
            background: #eee;
            border: none;
          }
        }
        .toRe {
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .el-checkbox {
            width: 70px;
            height: 100%;
            line-height: 40px;
          }
          p {
            line-height: 40px;
            a {
              margin: 0 10px;
            }
          }
        }
      }
    }
  }
}

.mainColor {
  color: #649efd;
}
</style>